<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业</title>
    <style>
        .one{
            width: 800px;
            height: 400px;
            background-color: coral;
            position: relative;

        }
        .left{
            width: 200px;
            height: 400px;
            background-color: brown;
            float: left;
        }
        .right{
            width: 600px;
            height: 400px;
            background-color: blueviolet;
            float: left;
            font-size: 50px;
            text-align: center;
            line-height: 400px;
        }
.left-a{
    width: 200px;
    height: 100px;
    font-size: 20px;
    text-align: center;
    line-height: 100px;
}
        .leftb{
            background-color: gold;
        }
        .oneTop{
            position: absolute;
            left: 200px;
            top: 25px;
            background-color: blue;
            width: 50px;
            height: 50px;
            transition: top 1s linear;
        }

    </style>
</head>
<body>
<div id="root">
    <fieldset>
        <legend>
            <h2>图片切换</h2>
        </legend>
        <div><img :src="a" alt=""></div>
        <button @click="cut('a')">第一张</button>
        <button @click="cut('b')">第二张</button>
        <button @click="cut('c')">第三张</button>
        <button @click="cut('d')">第四张</button>

    </fieldset>
    <fieldset>
        <legend>
            <h2>邮箱选择</h2>
        </legend>
<div class="one">
    <div class="oneTop" :style="jiantou"></div>
    <div class="left">
<div class="left-a" :class="{leftb:str=='QQ邮箱'}" @click="email('QQ邮箱')" >qq邮箱</div>
        <div class="left-a" :class="{leftb:str==YX[1]}" @click="email('网易邮箱')" >网易邮箱</div>
        <div class="left-a" :class="{leftb:str==YX[2]}" @click="email(YX[2])" >谷歌邮箱</div>
        <div class="left-a" :class="{leftb:str==YX[3]}" @click="email(YX[3])" >拉里邮箱</div>
    </div>
    <div class="right">
{{str}}
    </div>
</div>
    </fieldset>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#root",
        data: {
            a: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1901934899,3099003643&fm=26&gp=0.jpg",
            str:"QQ邮箱",
            YX:["QQ邮箱","网易邮箱","谷歌邮箱","拉里邮箱"],
            jiantou:{
                top:"0"
            }

        },
        methods: {
            cut(s) {
                if (s == "a") {
                    this.a = "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1901934899,3099003643&fm=26&gp=0.jpg";
                } else if (s == "b") {
                    this.a = "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3182986590,3982024893&fm=26&gp=0.jpg";
                } else if (s == "c") {
                    this.a = "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2902221533,209044357&fm=26&gp=0.jpg";
                } else if (s == "d") {
                    this.a= "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1971561294,1949472281&fm=26&gp=0.jpg";
                }
            },
            email(s){
                let index=this.YX.indexOf(s)
                this.str=s;
                this.jiantou.top=index*100+25+"px";
                console.log(index*100+"px");
            }

        },

    })
</script>